<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>address</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			ul,
			li,
			p {
				list-style: none;
				padding: 0;
				margin: 0;
			}

			ul {
				padding: 0 10px;
				background-color: white;
				margin-top: 10px;
			}

			li {
				padding: 10px 0;
				overflow: hidden;
				position: relative;
			}

			li:after {
				position: absolute;
				right: 0;
				left: 0;
				bottom: 0;
				height: 1px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}

			.message {
				width: 70%;
			}

			.message p {
				line-height: 30px;
			}

			.controlBtn {
				width: 30%;
			}

			.sex {
				margin: 0 20px 0 10px;
			}

			.controlBtn {
				line-height: 60px;
			}

			.controlBtn i {
				line-height: 60px;
			}

			.controlBtn i {
				margin-right: 20px;
			}

			.mui-bar.mui-bar-tab {
				height: 44px;
			}

			.mui-bar.mui-bar-tab p {
				text-align: center;
				font-size: 18px;
			}

			.mui-bar.mui-bar-tab .addBtn i {
				color: orange;
			}

			.control {
				line-height: 44px;
			}

			.mui-bar .addBtn {
				top: 0;
				bottom: 0;
				height: 44px;
				border: none;
			}

			.mui-btn,
			button,
			input[type=button],
			input[type=reset],
			input[type=submit] {
				vertical-align: middle;
			}

			ul {
				padding-bottom: 44px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的收货地址</h1>
			<!--<span class="mui-pull-right control">管理</span>-->
		</header>
		<div class="mui-content" id="address">
			<ul class="addressList">
				<li v-for="item in address">
					<div class="mui-pull-left message">
						<p class="mui-ellipsis addressBar">{{ item.building }}{{ item.doorplate }}</p>
						<p class="msg">
							<span class="name">{{ item.name }}</span>
							<span class="sex" v-if="item.gender == 0">先生</span>
							<span class="sex" v-if="item.gender == 1">女士</span>
							<span class="phone">{{ item.phonenumber }}</span>
						</p>
					</div>
					<div class="mui-pull-left controlBtn">
						<!--删除-->
						<i class="mui-icon mui-icon-trash mui-pull-right" v-on:click="clickFun(item.addressId,'del','null')"></i>
						<!--编辑-->
						<i class="mui-icon mui-pull-right mui-icon-compose" v-on:click="clickFun(item.addressId,'edit','addAddress')"></i>
					</div>
				</li>
			</ul>
			<nav class="mui-bar mui-bar-tab">
				<button v-on:click="clickFun(null,'toAdd','addAddress')" type="button" class="addBtn mui-btn mui-btn-block"><i class="mui-icon mui-icon-plus"></i>新增收货地址</button>
			</nav>
		</div>
	</body>
	<script src="js/zepto_1.1.3.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/server.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#address',
			data: {
				address: []
			},
			mounted: function() {
				this.init();
			},
			methods: {
				init: function() {
					mui.init({
						pullRefresh: {
							container: ".mui-content", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
							down: {
								style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
								color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
								height: '90px', //可选,默认50px.下拉刷新控件的高度,
								range: '100px', //可选 默认100px,控件可下拉拖拽的范围
								offset: '45px', //可选 默认0px,下拉刷新控件的起始位置
								auto: true, //可选,默认false.首次加载自动上拉刷新一次
								callback: this.getData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据							}
							}
						}
					});
					//添加newId自定义事件监听
					window.addEventListener('pullRefresh', function(event) {
						location.reload();
					});
				},
				openWin: function(id, url, type) { // 新打开页面 (带导航头)
					var aId = id,
						urlId = url,
						urlName = urlId + ".html",
						title = {},
						img = {
							base64Data: ''
						};

					if(type == 'edit') {
						topTitle = {
							title: { //标题配置
								text: "编辑收货地址", //标题文字
							},
							back: { //左上角返回箭头
								image: img
							}
						}
					} else {
						topTitle = {
							title: { //标题配置
								text: "新增收货地址", //标题文字
							},
							back: { //左上角返回箭头
								image: img
							}
						}
					};
					var webview = mui.openWindowWithTitle({
						url: urlName,
						id: urlName,
						extras: {
							rid: aId //扩展参数
						},
						show: {
							autoShow: true,
							aniShow: "auto",
						},
						waiting: {
							autoShow: true,
							title: '正在加载...'
						}
					}, topTitle)
				},
				getData: function() {
					mui.ajax(server + '/address/list', {
						dataType: 'json',
						success: function(res) {
							console.log(res)
							vm.address = res.rows
						}
					});
					mui('.mui-content').pullRefresh().endPulldown(); // 下拉结束   初始化下拉
				},
				ajaxFun: function(url, id) {
					mui.ajax(url, {
						dataType: 'json',
						data: {
							addressId: id
						},
						success: function(res) {
							console.log(res);
							vm.getData();
							mui.toast('删除成功');
						}
					})
				},
				clickFun: function(id, type, url) {
					var rid = id, // 地址 id
						type = type, // 按钮事件类型
						aUrl = url; // 提交地址/新开页面地址
					console.log(rid + '---' + aUrl + '---' + type);
					switch(type) {
						case 'del': // 删除
							mui.confirm('', '确认删除该条收货地址', ['取消', '确认'], function() { // 删除操作询问框 -> 防止误操作
								vm.ajaxFun(server + '/address/delete', rid);
							}, 'div')
							break;
						case 'edit': // 编辑
						case 'toAdd': // 新增
							vm.openWin(rid, aUrl, type)
							break;
						default:
							break;
					}
				}
			}
		})
	</script>

</html>